<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto card-bg">
			<div class="system-user-search energy-from">
				<el-row>
					<el-form-item>
						<el-input v-model="state.tableData.param.name" size="default" placeholder="请输入角色名称" style="max-width: 180px" clearable> </el-input>
					</el-form-item>
					<el-form-item>
						<div class="btn2 ml20" @click="getAllRoleList()">
							<el-icon> <ele-Search /> </el-icon><span class="ml6">查询</span>
						</div>
						<div class="btn1 ml10" @click="onOpenAddRole()">
							<el-icon> <ele-Plus /> </el-icon><span class="ml6">新增角色</span>
						</div>
					</el-form-item>
				</el-row>
			</div>
			<div class="energy-table">
				<el-table
					:data="state.tableData.data"
					style="width: 100%"
					:cell-style="{ textAlign: 'center' }"
					:row-style="{ background: '#0F2C6A' }"
					:header-cell-style="{ background: '#1E4897', color: '#499AFD', textAlign: 'center' }"
					size="default"
				>
					<el-table-column type="index" label="序号" width="80" />
					<el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
					<el-table-column prop="roleKey" label="角色权限字符串" show-overflow-tooltip></el-table-column>
					<el-table-column prop="type" label="角色类型">
						<template #default="scope">
							<div :class="scope.row.type == 0 ? 'energy-tag1' : 'energy-tag2'">
								<el-tag size="default">{{ scope.row.type == 0 ? '系统类型' : '用户类型' }}</el-tag>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
					<el-table-column prop="status" label="角色状态" show-overflow-tooltip>
						<template #default="scope">
							<el-switch
								v-model="scope.row.status"
								size="default"
								:active-value="0"
								:inactive-value="1"
								active-text="启用"
								inactive-text="禁用"
								inline-prompt
								@change="changState(scope.row)"
							/>
						</template>
					</el-table-column>
					<el-table-column label="角色权限">
						<template #default="scope">
							<el-button link size="small" type="primary" @click="onOpenPermissions(scope.row, false)">查看权限</el-button>
							<el-button link size="small" type="success" @click="onOpenPermissions(scope.row, true)">分配权限</el-button>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template #default="scope">
							<el-button size="small" link type="success" @click="onOpenAddRole(scope.row)">修改</el-button>
							<el-button size="small" link type="danger" @click="onRowDel(scope.row)" :disabled="scope.row.type == 0">删除</el-button>
						</template>
					</el-table-column>
					<template #empty>
						<NoData></NoData>
					</template>
				</el-table>
			</div>
			<div class="current-page">
				<el-pagination
					@size-change="onHandleSizeChange"
					@current-change="onHandleCurrentChange"
					class="mt15"
					:pager-count="5"
					:page-sizes="[1, 5, 10, 15, 20]"
					v-model:current-page="state.tableData.param.pageNum"
					background
					v-model:page-size="state.tableData.param.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="state.tableData.total"
				>
				</el-pagination>
			</div>
		</div>
		<RoleDialog ref="roleDialogRef" @refresh="getAllRoleList()" />
		<permissionDialog ref="permissionDialogRef" @refresh="getAllRoleList()" />
	</div>
</template>

<script setup lang="ts" name="systemRole">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElNotification } from 'element-plus';
import { useRoleApi } from '/@/api/role/index';

// 引入组件
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
const permissionDialog = defineAsyncComponent(() => import('/@/views/system/role/permissionDialog.vue'));

// 定义变量内容
const roleDialogRef = ref();
const permissionDialogRef = ref();
const state: any = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			name: '', //角色名称
			pageNum: 1,
			pageSize: 10,
		},
	},
	menuIds: [], // 当前角色的菜单权限
});

// 获取全部角色
const getAllRoleList = async () => {
	state.tableData.loading = true;
	const { data } = await useRoleApi().getAllRoleList(state.tableData.param);
	state.tableData.total = data.total;
	state.tableData.data = data.records;
	setTimeout(() => {
		state.tableData.loading = false;
	}, 500);
};

// 切换角色状态
const changState = async (row: any) => {
	await getCheckedRoles(row.id);

	const data = await useRoleApi().updateRole({
		id: row.id,
		name: row.name,
		roleKey: row.roleKey,
		status: row.status,
		remark: row.remark,
		type: row.type,
		menuIds: state.menuIds,
	});
	if (data.code == 200) {
		ElNotification({
			title: '提示',
			message: '修改角色状态成功',
			position: 'top-right',
			type: 'success',
		});
		getAllRoleList();
	}
};

// 根据id获取角色详情-已选中的角色(selected  0否 1是)
const getCheckedRoles = async (id: string) => {
	const { data } = await useRoleApi().getRoleDetailById(id);
	let tileData: any = [];
	function changMenuData(data: []) {
		data.forEach((item: any) => {
			tileData.push(item);
			if (item.childList && item.childList.length > 0) {
				changMenuData(item.childList);
			}
		});
	}
	changMenuData(data.menus);
	state.menuIds = [];
	tileData.map((item: any) => {
		if (item.selected !== 0) {
			state.menuIds.push(item.id);
		}
	});
};

// 打开新增/修改角色弹窗
const onOpenAddRole = (row?: Object) => {
	roleDialogRef.value.openDialog(row);
};

// 打开分配/查看权限弹窗
const onOpenPermissions = (row: Object, isAssign: Boolean) => {
	permissionDialogRef.value.openDialog(row, isAssign);
};

// 删除角色
const onRowDel = (row: any) => {
	ElMessageBox.confirm(`此操作将永久删除角色:“${row.name}”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			const data = await useRoleApi().delRoleDetailById(row.id);
			if (data.code == 200) {
				getAllRoleList();
				ElNotification({
					title: '提示',
					message: '删除角色成功',
					position: 'top-right',
					type: 'success',
				});
			}
		})
		.catch(() => {});
};

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getAllRoleList();
};

// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getAllRoleList();
};

// 页面加载时
onMounted(() => {
	getAllRoleList();
});
</script>

<style scoped lang="scss">
.system-role-container {
	.system-role-padding {
		padding: 15px;
	}
}
</style>
